<template>
	<view class="cu-card " >
		<view class="cu-item contenBox" style="padding:10px 0 ;"> 
			<view class="input-row border contenBox-item ">
				<text class="text-gray">投诉主题：</text>
				<input class="contenBox-border " v-model="FeedBack.Title" type="text" value="" />
			</view>
			<view class="input-row border menu">
				<text class="text-gray">投诉类型：</text>
				<picker @change="pickerChang" class="cuspicker arrow contenBox-border "  style="position: relative;"
				 range-key="DataValue" :value="pickerIndex" :range="complainList"
				 data-type="complainList">
					<view class="picker cuspicker_item">
						{{complainList[pickerIndex].DataValue||''}}
					</view>
				</picker>
				
			</view>
			<text class="cuIcon-right text-blue" style="position: relative;left: 305px;top: -26px;"></text>
			<view class="input-row border contenBox-item ">
				<text class="text-gray">车次单号：</text>
				<input class="contenBox-border " v-model="FeedBack.OrderNo" type="text" value="" />
				
			</view>
			<view class="input-row border ">
				<text class="text-gray">投诉内容：</text>
				<view class="" style="width: 70vw;">
					<textarea class="padding border-sm" v-model="FeedBack.Content"  value=""   />
				</view>
			</view>
			<view class="input-row border margin-cul">
				<text class="text-gray">联系方式：</text>
				<input class="contenBox-border " type="text" v-model="FeedBack.Contact" value="" />
			</view>
			<view class=" margin-cul" style="padding-left: 15px;">
				<view class="">
					<text class="text-gray">上传图片：</text>
				</view>
				<upload
				 :count="1"
				 fileKeyName="file"
				 @getFile="getFile"
				 :defaultFile="chooseImages">
				</upload>
				
			</view>
			<view class="padding" >
				<button class="cu-btn block bg-green margin-tb-sm lg" style="box-shadow: 0 3px 2px #90A19A;"  @click="confirm">提交</button>
			</view>
		</view>
		
	</view>
	
	
</template>

<script>
	import upload from '@/components/upload.vue';
	export default{
		components: {
			upload
		},
		data(){
			return{
				openid :'',
				complainList:[
					{complainType:'时效问题',code:'beLate'},
					{complainType:'车辆问题',code:'car'},
				],
				pickerIndex:0,
				files: [],
				chooseImages: [],
				FeedBack:{
					Title :'',
					Type :'',
					OrderNo :'',
					Contact :'',
					Content :'',
					imgUrl :[],
				}
			}
		},
		mounted(){
			const session= uni.getStorageSync('session');
			this.openid=session.openid
			this.getType()
		},
		methods:{
			getType(){
				this.$store.dispatch('uni/Config',{datatype:7}).then(res=>{
					this.complainList=res
				})
			},
			pickerChang(e){
				const {
					type
				} = e.currentTarget.dataset;
				this.pickerIndex=e.detail.value
				this.FeedBack.Type=this.complainList[this.pickerIndex].DataValue
			},
			getFile(data) {
				this.files = data.files;
				this.chooseImages = data.wxFiles
			},
			confirm(){
				let {Type ,..._FeedBack}=this.FeedBack
				if(this.FeedBack.Contact){
					 if(!(/^1[3456789]\d{9}$/.test(this.FeedBack.Contact))){ 
					    uni.showToast({
					    	title:'请填写正确的手机号码',
					    	icon:'none'
					    })
					     return; 
					    } 
				}
				let params={
					...this.FeedBack,
					Type:this.complainList[this.pickerIndex].DataValue,
					openid :this.openid,
					imgUrl :this.files[0].Data
				}
				this.$store.dispatch('uni/AddFeedback',params).then(res=>{
					if(res.Code===0){
						uni.showToast({
							title:'提交成功',
							duration:1500
						})
						setTimeout(()=>{
							uni.navigateBack({
								delta:1
							})
						},1500)
					}else{
						uni.showModal({
							title:'提示',
							content:res.Message,
							showCancel:false
						})
					}
				})
				
			}
		},
	}
</script>
<style lang="scss" scoped>
	.contenBox{
		&-item{
			height: 40px;
		}
			&-border{
				border: 1px solid #DADADA;
				border-radius: 5px;
				width: 70vw;
				height: 33px;
				line-height: 33px;
				padding-left: 6px;
			}
		}
</style>